<template>
	<view>
		<xk-header :headerbg="true" :back="true" title="到访详情"></xk-header>
		<view class="visit-content">
			<view class="visit">访问信息</view>
			<!-- <view :class="options.status == '0' ? 'staus_1' : options.status == '1' ? 'staus_2' : options.status == '2' ? 'staus_3' :
									options.status == '3' ? 'staus_4' : 'staus_5'">
				<view class="staus_word">{{ options.status == '0' ? '待审核' : options.status == '1' ? '已通过' : options.status == '2' ? '已拒绝' :
									options.status == '3' ? '已到访' : options.status == '4'?'已失效' : '已取消' }}</view>
			</view> -->
			<view class="content">
				<view class="list">
					<view class="list-item">
						<view class="list-item-title">
							被访公司
						</view>
						<view class="list-item-content">
							{{options.receiveOrgName}}
						</view>
					</view>
					<view class="list-item">
						<view class="list-item-title">
							被访人姓名
						</view>
						<view class="list-item-content">
							{{options.receiver}}
						</view>
					</view>
					<view class="list-item">
						<view class="list-item-title">
							访问日期
						</view>
						<view class="list-item-content">
							{{options.startTime}}
						</view>
					</view>
					<view class="list-item">
						<view class="list-item-title">
							访问事由
						</view>
					</view>
					<view class="list-item">
						<view class="list-item-reason">
							{{options.reason}}
						</view>
					</view>
				</view>
				<!-- <u-cell-group :border="false">
					<u-cell size="large" title="被访公司" :value="options.receiveOrgName"></u-cell>
					<u-cell size="large" title="被访人姓名" :value="options.receiver"></u-cell>
					<u-cell size="large" title="访问日期" :value="options.startTime"></u-cell>
					<u-cell size="large" title="访问事由" :value="options.reason"></u-cell>
				</u-cell-group> -->
			</view>
			<view class="visit">访客信息</view>
			<view class="content">
				<view class="list">
					<view class="list-item">
						<view class="list-item-title">
							访客姓名
						</view>
						<view class="list-item-content">
							{{options.visitorName}}
						</view>
					</view>
					<view class="list-item">
						<view class="list-item-title">
							访客电话
						</view>
						<view class="list-item-content">
							{{options.phone}}
						</view>
					</view>
					<view class="list-item">
						<view class="list-item-title">
							访客所在单位
						</view>
						<view class="list-item-content">
							{{options.company}}
						</view>
					</view>
				</view>
				<!-- <u-cell-group :border="false">
					<u-cell size="large" title="访客姓名" :value="options.visitorName"></u-cell>
					<u-cell size="large" title="访客电话" :value="options.phone"></u-cell>
					<u-cell size="large" title="访客所在单位" :value="options.company"></u-cell>
				</u-cell-group> -->
			</view>
			<!-- <view v-if="options.status=='0'">
				<u-button type="primary"  text="再次提醒"></u-button>
				<u-button type="" text="取消预约"></u-button>
			</view> -->
			<view class="common-bottom-view" v-if="options.status=='1'">
				<view @click="getQRcode" class="common-btn">通行二维码</view>
			</view>
			<view class="common-zw"></view>
		</view>
		<u-popup :show="show" mode="center" customStyle="height:50%;width=60%;" :round="10" closeable
			@close="show = false">
			<view class="code_title">通行二维码</view>
			<view class="code_container">
				<u--image :src="qrcode" width="300px" height="340px"></u--image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				show: false,
				qrcode: '',
			}
		},
		onLoad(options) {
			this.options = JSON.parse(options.item)

			console.log(this.options)
		},
		methods: {
			getQRcode() {
				this.show = true
				// let visitorId=e.currentTarget.dataset.item.visitorId
				this.$util.post({
					url: "wx/ob/visit/getPassQRcode",
					data: {
						visitorId: this.options.visitorId
					},
				}).then(res => {
					this.qrcode = 'data:image/png;base64,' + res
				})
			},
		}
	}
</script>

<style lang="less">
	.code_title {
		text-align: center;
		font-size: 18px;
		padding: 15px 0 15px 0;
		border-bottom: 1px solid #f1f1f1;
		font-weight: bold;
		background-color: #f1f1f1;
		border-radius: 8px 8px 0 0;
	}

	.code_container {
		// padding:15px;
		// margin-top:15px;
		background-color: #f8f8f8;
		// font-size:28rpx;
		border-radius: 8px;
	}

	.staus_1 {
		background-color: rgb(251, 184, 125);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		color: white;
		position: absolute;
		top: 125rpx;
		right: 15rpx;
	}

	.staus_2 {
		background-color: rgb(119, 190, 255);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		color: white;
		position: absolute;
		top: 125rpx;
		right: 15rpx;
	}

	.staus_3 {
		background-color: rgb(227, 77, 89);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		color: white;
		position: absolute;
		top: 125rpx;
		right: 15rpx;
	}

	.staus_4 {
		background-color: rgb(69, 214, 156);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		color: white;
		position: absolute;
		top: 125rpx;
		right: 15rpx;
	}

	.staus_5 {
		background-color: rgb(179, 179, 179);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		color: white;
		position: absolute;
		top: 125rpx;
		right: 15rpx;
	}
	.visit-content{
		/* height: 100vh; */
		background: #F5F5F5;
	}
	.visit {
		padding: 10px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.content {
		/* background-color: azure; */
		background: #FFFFFF;
		.list{
			.list-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx;
				border-bottom: 2rpx solid #F0F0F0;
				.list-item-reason{
					word-wrap: break-word;
				}
			}
			.list-item-title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}
	}

	.staus {
		background-color: rgb(69, 130, 225);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		color: white;
		position: absolute;
		top: 125rpx;
		right: 15rpx;
		/* padding: 10px; */
	}

	.staus_word {
		color: #fff;
		padding-top: 35rpx;
		font-size: 23rpx;
		transform: skewY(12deg);
	}
</style>
